<template lang="">
    <div>
        <table>
            <tr>
                <td>账号</td><td><input v-model="form.login" type="text"></td>
            </tr>
                    <tr>
                <td>密码</td><td><input v-model="form.psd" type="password"></td>
            </tr>
        </table>
        <button @click="submmit">登录</button>

    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
const form = reactive({
    login: "",
    psd: ""
})
const submmit = () => {
    console.log(form);
}

onMounted(() => {
    console.log('login mounted')
})

// 使用keepalive后面才出现,每次切换都会执行
onActivated(() => {
    console.log('login activated')
})
onDeactivated(() => {
    form.psd = ''
    console.log('login deactiveted')
})

onUnmounted(() => {
    console.log('login onUnmounted')
})

</script>


<script lang="ts">
export default {
    name: 'Login'
}
</script>

<style lang="">
    
</style>


